﻿@{
    Layout = null;
    ViewBag.Title = "发表文章";
    bool u = Model.UserName == HttpContext.Current.User.Identity.Name ? true : false;
}
@using Blog.Models
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@(Model.UserName)的相册</title>
    <link href="~/Content/common.min.css" rel="stylesheet" />
    <link href="~/Content/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/twitter-bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/twitter-bootstrap/bootstrap-tag.css" rel="stylesheet" type="text/css" />
    <link href="~/Scripts/kindeditor-4.1.7/themes/default/default.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .bg {
            background: url('/Images/slide-02.jpg') repeat-x #fff;
            height: 300px;
        }

            .bg .title {
                margin-left: 200px;
                margin-top: 80px;
            }

                .bg .title p {
                    font-size: larger;
                    margin-right: 100px;
                }

        .sidebar {
            position: absolute;
            top: 250px;
            left: 80px;
        }

            .sidebar .headpic {
                width: 140px;
                height: 140px;
                background-color: #fff;
                border: 1px solid #ccc;
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
                box-shadow: 0 1px 3px rgba(0,0,0,.1);
            }

        #headpic_img {
            width: 140px;
            height: 140px;
        }


        #albumcontent {
            padding-top: 150px;
            padding-bottom: 130px;
        }

            #albumcontent .album {
                width: 1024px;
                margin: 0 auto;
            }

                #albumcontent .album .album-thumbnails {
                    margin-top: 40px;
                }

        .thumbnails ul {
            list-style: none;
        }

            .thumbnails ul li {
                margin-top: 20px;
            }

                .thumbnails ul li:hover {
                    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
                    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
                    box-shadow: 0 1px 3px rgba(0,0,0,.2);
                }

                .thumbnails ul li form {
                    margin: 0px;
                }

                .thumbnails ul li .album_pic {
                    position: relative;
                }

                .thumbnails ul li .change_btn_div {
                    position: absolute;
                    text-align: right;
                    right: 12px;
                    bottom: 12px;
                }

                .thumbnails ul li .info_div {
                    position: absolute;
                    text-align: right;
                    left: 12px;
                    top: 12px;
                }

        @@media (max-width: 768px) {
            .sidebar {
                position: absolute;
                top: 280px;
                left: 80px;
                width: 240px;
            }
        }

        #login_area {
            color: #5b5b5b;
            font-size: 12px;
            overflow: hidden;
            text-align: right;
            height: 22px;
            line-height: 22px;
            margin-right: 30px;
        }

            #login_area a {
                padding-left: 15px;
            }

            #login_area ul {
                list-style: none;
            }

                #login_area ul li {
                    display: inline;
                    padding-left: 15px;
                }

        #lean_overlay {
            position: fixed;
            z-index: 100;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000;
            display: none;
        }

        #addalb, #addpho {
            width: 600px;
            padding-bottom: 2px;
            display: none;
            background: #FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
            -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
            -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
            overflow: hidden;
        }

        #addalb-header, #addpho-header {
            background: url(/Images/hd-bg.png);
            padding: 18px 18px 14px 18px;
            border-bottom: 1px solid #CCC;
            border-top-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -webkit-border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            -webkit-border-top-right-radius: 5px;
        }

            #addalb-header h2, #addpho-header h2 {
                color: #444;
                font-size: 2em;
                font-weight: 700;
                margin-bottom: 3px;
                text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
            }

        #addalb #addalb-body, #addpho #addpho-body {
            padding: 14px 50px;
            margin-bottom: 50px;
        }

        #addalb-body #frmaddalbum, #addpho-body #frmaddphoto {
            min-height: 100px;
        }

        .modal_close {
            position: absolute;
            top: 12px;
            right: 12px;
            display: block;
            width: 14px;
            height: 14px;
            background: url(/Images/modal_close.png);
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id="login_area" class="clearfix">
        @if (HttpContext.Current.User.Identity.IsAuthenticated)
        {
            <text>
            @Html.ActionLink(User.Identity.Name, "Profile", "Account", routeValues: null, htmlAttributes: new { @class = "username" })
            @Html.ActionLink("我的相册", "Index", "Album", routeValues: new { username = @HttpContext.Current.User.Identity.Name }, htmlAttributes: null)
            @Html.ActionLink("我的博客", "Index", "User", routeValues: new { username = @HttpContext.Current.User.Identity.Name }, htmlAttributes: null)
            @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
            {
                @Html.AntiForgeryToken()
<a href="javascript:document.getElementById('logoutForm').submit()">注销</a>
            }
            </text>
        }
        else
        {
            <ul>
                <li>@Html.ActionLink("注册", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
                <li>@Html.ActionLink("登录", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
            </ul>
        }
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12 bg">
                <div class="title">
                    <h1>@Model.NickName </h1>
                    <p>@Model.SelfIntro</p>
                </div>
            </div>
        </div>
        <div class="sidebar">
            <div class="headpic">
                <img  id="headpic_img" src="@Model.HeadPic"/>
            </div>
            <div class="nickname">
                <h3 class="text-left text-success left">昵称：<a href="/@Model.UserName">@Model.NickName</a></h3>
            </div>
        </div>
    </div>
    <div class="row-fluid" id="albumcontent">
        <div class="span12">
            <div class="album">
                <div>
                    @if (u)
                    {
                        <a class="btn" href="#addpho" rel="leanModal1">上传照片</a>
                        <a class="btn" href="#addalb" rel="leanModal">新建相册</a>
                    }
                </div>
                <div class="album-thumbnails">
                    <ul class="thumbnails">
                        <li class="span4">
                            <ul>
                                @foreach (AlbumsViewModel album in ViewData["albums1"] as List<AlbumsViewModel>)
                                {
                                    <li>
                                        <form enctype="multipart/form-data" method="post">
                                            <input type="hidden" value="@album.AlbumID" name="albumid" />
                                            <div class="thumbnail">
                                                <div class="album_pic">
                                                    <a href="/@Model.UserName/Album/@album.AlbumID" target="_blank">
                                                        <img src="@album.CoverPath" id="@album.AlbumID"/></a>
                                                    <div class="change_btn_div" style="display: none;">
                                                        <input type="file" name="imgfile" style="display: none;" />
                                                        <button class="btn btn-small"  id="uptimg_@album.AlbumID"><span>更换相册封面</span></button>
                                                    </div>
                                                    <div class="info_div">
                                                        <span class="badge">@album.PhotoNum</span>
                                                    </div>
                                                </div>
                                                <div class="caption">
                                                    <div class="title">
                                                        <h3>@album.AlbumName
                                                        </h3>
                                                    </div>
                                                    <div class="description">
                                                        <p>
                                                            @album.Description
                                                        </p>
                                                    </div>
                                                    <p>
                                                        @if (u)
                                                        {
                                                            <a class="btn" data-ation="update" href="javascript:void(0);">编辑</a>
                                                        }
                                                    </p>
                                                </div>
                                            </div>
                                        </form>
                                    </li>
                                }
                            </ul>
                        </li>
                        <li class="span4">
                            <ul>
                                @foreach (AlbumsViewModel album in ViewData["albums2"] as List<AlbumsViewModel>)
                                {
                                    <li>
                                        <form enctype="multipart/form-data" method="post">
                                            <input type="hidden" value="@album.AlbumID" name="albumid" />
                                            <div class="thumbnail">
                                                <div class="album_pic">
                                                    <a href="/@Model.UserName/Album/@album.AlbumID" target="_blank">
                                                        <img src="@album.CoverPath" id="@album.AlbumID"/></a>
                                                    <div class="change_btn_div" style="display: none;">
                                                        <input type="file" name="imgfile" style="display: none;" />
                                                        <button class="btn btn-small"  id="uptimg_@album.AlbumID"><span>更换相册封面</span></button>
                                                    </div>
                                                    <div class="info_div">
                                                        <span class="badge">@album.PhotoNum</span>
                                                    </div>
                                                </div>
                                                <div class="caption">
                                                    <div class="title">
                                                        <h3>@album.AlbumName
                                                        </h3>
                                                    </div>
                                                    <div class="description">
                                                        <p>
                                                            @album.Description
                                                        </p>
                                                    </div>
                                                    <p>
                                                        @if (u)
                                                        {
                                                            <a class="btn" data-ation="update" href="javascript:void(0);">编辑</a>
                                                        }
                                                    </p>
                                                </div>
                                            </div>
                                        </form>
                                    </li>
                                }
                            </ul>
                        </li>
                        <li class="span4">
                            <ul>
                                @foreach (AlbumsViewModel album in ViewData["albums3"] as List<AlbumsViewModel>)
                                {
                                    <li>
                                        <form enctype="multipart/form-data" method="post">
                                            <input type="hidden" value="@album.AlbumID" name="albumid" />
                                            <div class="thumbnail">
                                                <div class="album_pic">
                                                    <a href="/@Model.UserName/Album/@album.AlbumID" target="_blank">
                                                        <img src="@album.CoverPath" id="@album.AlbumID"/></a>
                                                    <div class="change_btn_div" style="display: none;">
                                                        <input type="file" name="imgfile" style="display: none;" />
                                                        <button class="btn btn-small" id="uptimg_@album.AlbumID"><span>更换相册封面</span></button>
                                                    </div>
                                                    <div class="info_div">
                                                        <span class="badge">@album.PhotoNum</span>
                                                    </div>
                                                </div>
                                                <div class="caption">
                                                    <div class="title">
                                                        <h3>@album.AlbumName
                                                        </h3>
                                                    </div>
                                                    <div class="description">
                                                        <p>
                                                            @album.Description
                                                        </p>
                                                    </div>
                                                    <p>
                                                        @if (u)
                                                        {
                                                            <a class="btn" data-ation="update" href="javascript:void(0);">编辑</a>
                                                        }
                                                    </p>
                                                </div>
                                            </div>
                                        </form>
                                    </li>
                                }
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="addalb" style="display: none">
        <div id="addalb-ct">
            <div id="addalb-header">
                <h2>新建相册</h2>
                <a class="modal_close" href="#"></a>
            </div>
            <div id="addalb-body">
                <form id="frmaddalbum" enctype="multipart/form-data" method="post">
                    <div class="control-group">
                        <label class="control-label" for="albumname">相册名</label>
                        <div class="controls">
                            <input type="text" class="input-large" name="albumname" id="albumname">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="description">相册描述</label>
                        <div class="controls">
                            <textarea class="input-large" name="description" id="description" rows="6" style="width: 90%;"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="coverpath">相册封面</label>
                        <div class="controls">
                            <input type="text" name="upfile" id="upfile" disabled style="margin-bottom: 0px;">
                            <button class="btn" id="btn_addcoverpath"><span>添加相册封面</span></button>
                            <input type="file" id="coverpath" name="coverpath" style="width: 1px; height: 1px; visibility: hidden" />
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <img src="~/Images/loading.gif" id="loding" class="right" style="display: none; margin-top: 8px;" />
                            <button type="submit" class="btn right">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="addpho" style="display: none">
        <div id="addpho-ct">
            <div id="addpho-header">
                <h2>上传图片</h2>
                <a class="modal_close" href="#"></a>
            </div>
            <div id="addpho-body">
                <form id="frmaddpho" enctype="multipart/form-data" method="post">
                    <div class="control-group">
                        <label class="control-label" for="photoname">相册</label>
                        <div class="controls">
                            @Html.DropDownList("album", "===请选择===")
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="photoname">照片名称</label>
                        <div class="controls">
                            <input type="text" class="input-large" name="photoname" id="photoname">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="photodescription">照片描述</label>
                        <div class="controls">
                            <textarea class="input-large" name="photodescription" id="photodescription" rows="6" style="width: 90%;"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="coverpath">上传照片</label>
                        <div class="controls" id="filehelp">
                            <input type="text" name="upfile1" id="upfile1" disabled style="margin-bottom: 0px;">
                            <button class="btn" id="btn_addphoto"><span>添加照片</span></button>
                            <input type="file" id="path" name="path" style="width: 1px; height: 1px; visibility: hidden" />
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <img src="~/Images/loading.gif" id="loding1" class="right" style="display: none; margin-top: 8px;" />
                            <button type="submit" class="btn right">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <input  type="hidden" id="uid" value="@Model.UID"/>
    <input type="hidden" id="uname" value="@Model.UserName" />
    <input type="hidden" id="identityname" value="@HttpContext.Current.User.Identity.Name" />
    <div class="row-fluid">
        <div class="span12" style="text-align: center;">
            @@2013 @Model.UserName Powered By <a href="mailto:568022847@qq.com">Zhuankeshumo</a>
        </div>
    </div>
    <script src="~/Scripts/twitter-bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.form.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.leanModal.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.scrollTo.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#frmaddpho").validate({
                errorClass: "help-inline",
                rules: {
                    album: {
                        required: true
                    },
                    photoname: {
                        required: true,
                        maxlength: 20
                    },
                    photodescription: {
                        maxlength: 150
                    },
                    path: {
                        required: true
                    }
                },
                messages: {
                    album: {
                        required: "请选择相册"
                    },
                    photoname: {
                        required: "请输入照片名",
                        maxlength: "照片名最多20个字符"
                    },
                    photodescription: {
                        maxlength: "照片描述最长为150位"
                    },
                    path: {
                        required: "请选择照片"
                    }
                },
                highlight: function (element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function (element) {
                    element
                    .text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('success');
                }
            });

            $('#frmaddpho').on('submit', function (e) {
                e.preventDefault();
                if ($("#uname").val() == $("#identityname").val()) {
                    if ($("#frmaddpho").valid()) {
                        $(this).ajaxSubmit({
                            type: "post",
                            url: "/Album/AddPhoto?uid=" + $("#uid").val(),
                            beforeSend: function () {
                                $("#loding1").show();
                            },
                            success: function (msg) {
                                $("#loding1").hide();
                                if (msg.Result == "OK") {
                                    alert("上传成功！");
                                } else {
                                    alert(msg.Message);
                                }
                            }
                        });
                    }
                }
            });

            $("#frmaddalbum").validate({
                errorClass: "help-inline",
                rules: {
                    albumname: {
                        required: true,
                        maxlength: 20
                    },
                    description: {
                        maxlength: 150
                    },
                    coverpath: {
                        required: true
                    }
                },
                messages: {
                    albumname: {
                        required: "请输入相册名",
                        maxlength: "相册名最多20个字符"
                    },
                    description: {
                        maxlength: "相册描述最长为150位"
                    },
                    coverpath: {
                        required: "请选择相册封面"
                    }
                },
                highlight: function (element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function (element) {
                    element
                    .text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('success');
                }
            });

            $('#frmaddalbum').on('submit', function (e) {
                e.preventDefault();
                if ($("#uname").val() == $("#identityname").val()) {
                    if ($("#frmaddalbum").valid()) {
                        $(this).ajaxSubmit({
                            type: "post",
                            url: "/Album/AddAlbum?uid=" + $("#uid").val(),
                            beforeSend: function () {
                                $("#loding").show();
                            },
                            success: function (msg) {
                                $("#loding").hide();
                                if (msg.Result == "OK") {
                                    var album = msg.Message;
                                    var ul = $($(".thumbnails li[class='span4']")[$('.thumbnails li ul li').length % 3]).children('ul');
                                    var str = "<li><form enctype='multipart/form-data'  method='post'><input type='hidden' value='" + album.AlbumID + "' name='albumid' />";
                                    str += '<div class="thumbnail"><div class="album_pic"><a href="/' + $("#uname").val() + '/Album/' + album.AlbumID + '" target="_blank"><img src="' + album.CoverPath + '" id="' + album.AlbumID + '"/></a>';
                                    str += '<div class="change_btn_div" style="display: none;">  <input type="file" name="imgfile" style="display: none;" />';
                                    str += ' <button class="btn btn-small" id="uptimg_' + album.AlbumID + '"><span>更换相册封面</span></button> </div>';
                                    str += ' <div class="info_div"><span class="badge">' + album.PhotoNum + '</span></div></div>';
                                    str += ' <div class="caption"><div class="title"> <h3>' + album.AlbumName + '</h3></div>';
                                    str += ' <div class="description"><p>' + album.Description + '</p></div>';
                                    str += '<p><a class="btn" data-ation="update"  href="javascript:void(0);">编辑</a></p> </div></div></form>';
                                    $(".modal_close").click();
                                    ul.append(str);
                                    $(window).scrollTo(ul[0].lastElementChild, 100, { easing: 'swing', queue: true, axis: 'xy' });
                                    $("#album").append("<option value='" + album.AlbumID + "'>"+album.AlbumName+"</option>")
                                } else {
                                    alert(msg.Message);
                                }
                            }
                        });
                    }
                }
            });

            $("#btn_addcoverpath").click(function () {
                $("#coverpath").click();
                return false;
            });

            $("#btn_addphoto").click(function () {
                $("#path").click();
                return false;
            });

            $("#coverpath").change(function () {
                $("#upfile")[0].value = this.value;
                $("#frmaddalbum").valid();
            });


            $("#path").change(function () {
                $("#upfile1")[0].value = this.value;
                $("#frmaddphoto").valid();
            });

            $("a[rel*=leanModal]").leanModal({ top: 100, closeButton: ".modal_close" });

            $("a[rel*=leanModal1]").leanModal({ top: 50, closeButton: ".modal_close" });

            $(".caption a[data-ation='update']").live('click', function () {
                var uid = $("#uid").val();
                if ($("#uname").val() == $("#identityname").val()) {
                    var $this = $(this);
                    var $p = $this.parent();
                    var str_btn = $this.parent().html();
                    var caption = $this.parent().parent();
                    var thumbnail = $this.parent().parent().parent();
                    var change_btn_div = thumbnail.children().children(".change_btn_div");
                    change_btn_div.animate({ bottom: 12 }, 200, 'easeInExpo', function () {
                        change_btn_div.css({ display: 'block', bottom: -20 }).stop().animate({ bottom: 12 }, 200, 'easeOutBounce');
                    });
                    var $title = caption.children('.title');
                    var str_title = $title.html();
                    var titlevalue = $.trim($title.children('h3')[0].innerHTML);
                    $title.html("<input type='text' style='margin: 8px 0;' name='albumname' value='" + titlevalue + "'>");
                    var $description = caption.children('.description');
                    var str_description = $description.html();
                    var descriptionvalue = $.trim($description.children('p')[0].innerHTML);
                    $description.html("<input type='text' style='margin: 7px 0;'  name='description'  value='" + descriptionvalue + "'>");
                    $p.html("<p><input class=\"btn save\" type='submit' value='确定'\"><img src='/Images/loading.gif' data-" + thumbnail.parent().children('input').val() + "='loding' style='display: none' /> <a class=\"btn cancel\" href=\"javascript:void(0);\">取消</a> </p>")
                    var frm = thumbnail.parent();
                    frm.validate({
                        errorClass: "field-validation-error",
                        rules: {
                            albumname: {
                                required: true,
                                maxlength: 20
                            },
                            description: {
                                maxlength: 150
                            }
                        },
                        messages: {
                            albumname: {
                                required: "相册名为空",
                                maxlength: "相册名最长为20位"
                            },
                            description: {
                                maxlength: "相册描述最长为150位"
                            }
                        },
                        highlight: function (element, errorClass) {
                            $(element).css({ border: "1px solid red" });
                        },
                        unhighlight: function (element, errorClass) {
                            $(element).css({ border: "1px solid #CCC" });
                        }
                    });

                    frm.on('submit', function (e) {
                        e.preventDefault();
                        if (frm.valid()) {
                            $(this).ajaxSubmit({
                                url: "/Album/AlbumUpdate?uid=" + uid,
                                beforeSend: function () {
                                    $("img[data-" + frm.children('input').val() + "='loding']").show();
                                },
                                success: function (data) {
                                    $("img[data-" + frm.children('input').val() + "='loding']").hide();
                                    if (data.Result == "OK") {
                                        $("img[id='" + data.Message.AlbumID + "']").attr({ 'src': data.Message.CoverPath });
                                        change_btn_div.hide();
                                        $p.html(str_btn);
                                        $title.html("<h3>" + data.Message.AlbumName + "</h3>");
                                        $description.html("<p>" + data.Message.Description + "</p>");
                                    } else {
                                        alert(data.Message);
                                    }
                                }
                            });
                        }
                    });

                    $p.children('p').children("a[class*='cancel']").click(function () {
                        change_btn_div.animate({ bottom: 0 }, 200, 'swing', function () {
                            change_btn_div.css({ display: 'none', bottom: 12 }).stop().animate({ bottom: 0 }, 200, 'swing');
                        });
                        $p.html(str_btn);
                        $title.html(str_title);
                        $description.html(str_description);
                    });

                    $("#uptimg_" + frm.children('input').val()).click(function () {
                        var s = change_btn_div.children("input[type='file']");
                        s.click();
                        return false;
                    });
                }
            })
        })
    </script>
</body>
</html>



